<template>
  <div class="tools-div">
    <el-button type="success" size="small" @click="addShow">
      查询所贷款信息
    </el-button>
  </div>

  <el-table :data="list" style="width: 100%">
    <el-table-column prop="lname" label="名称" />
    <el-table-column #default="scope" label="logo">
      <img :src="scope.row.remark" width="50" />
    </el-table-column>
    <el-table-column prop="rate" label="利率" />
    <el-table-column label="操作" align="center" width="200" #default="scope">
      <el-button type="primary" @click="loan(scope.row)">贷款</el-button>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.limit"
    :page-sizes="[10, 20, 50, 100]"
    layout="total, sizes, prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <el-dialog v-model="dialogVisible" title="添加或修改" width="97%">
    <el-table :data="findLoan" style="width: 100%">
      <el-table-column prop="realName" label="用户姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="lname" label="名称" />
      <el-table-column prop="idCard" label="身份证号" />
      <el-table-column prop="lname" label="所贷款项" />
      <el-table-column prop="amount" label="所贷款金额" />
      <el-table-column prop="redundancy1" label="实际还款金额" />
      <el-table-column prop="rate" label="利率" />
      <el-table-column prop="createTime" label="贷款日期" />
      <el-table-column prop="requiredate" label="还款日期" />
      <el-table-column prop="backDate" label="实际还款日期" />
      <el-table-column prop="redundancy2" label="逾期金额"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template v-slot="scope">
          <el-tag v-if="scope.row.state === 0" type="success">已还款</el-tag>
          <el-tag v-if="scope.row.state === 1" type="danger">未还</el-tag>
          <el-tag v-if="scope.row.state === 2" type="warning">逾期</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200" #default="scope">
        <el-button
          type="primary"
          v-show="scope.row.state != 0"
          @click="repayment(scope.row)"
        >
          还款
        </el-button>
      </el-table-column>
    </el-table>
  </el-dialog>
  <el-dialog v-model="dialogLoanUserVisible" title="Tips" width="350px">
    <span>
      <el-form :model="loanUserForm">
        <el-form-item label="贷款名称">
          <span>{{ loanUserForm.lname }}</span>
          <!--              <el-input readonly v-model="loanUserForm.lname"/>-->
        </el-form-item>
        <el-form-item label="logo">
          <img
            :src="loanUserForm.remark"
            style="padding-left: 100px"
            width="100"
            height="50"
          />
        </el-form-item>
        <el-form-item label="当前利率">
          <span>{{ loanUserForm.rate }}</span>
          <!--              <el-input readonly v-model="loanUserForm.rate"/>-->
        </el-form-item>
        <el-form-item label="最高额度">
          <el-input v-model="loanUserForm.loanlimit" @blur="hasLoan" />
        </el-form-item>
        <el-form-item label="还款期限">
          <el-select
            v-model="loanUserForm.repaymentdate"
            placeholder="请选择"
            @change="hasRepayMentDate"
          >
            <el-option value="请选择" />
            <el-option value="3期" :disabled="xiao === true" />
            <el-option value="6期" :disabled="xiao === true" />
            <el-option value="9期" :disabled="xiao === true" />
            <el-option value="12期" :disabled="xiao === true" />
          </el-select>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogLoanUserVisible = false">Cancel</el-button>
        <el-button
          type="primary"
          @click="getUserLoan"
          :disabled="flag === true"
        >
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  addLoan,
  getFindLoan,
  getLoan,
  selectUserLoan,
  updateLoan,
} from '@/api/loan'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const dialogLoanUserVisible = ref(false)
// 显示个人所贷款信息
const addShow = async () => {
  let item = localStorage.getItem('id')
  console.log(item)
  const { data } = await getFindLoan(item)
  findLoan.value = data
  dialogVisible.value = true
}
const flag = ref(false)
const xiao = ref(false)
const hasLoan = async () => {
  if (loanUserForm.value.loanlimit > loanlimit.value) {
    ElMessage.error('贷款额度不能超过' + loanlimit.value)
    flag.value = true
  }
  if (loanUserForm.value.loanlimit <= 3000) {
    xiao.value = true
  }
}
const hasRepayMentDate = async () => {
  if (loanUserForm.value.repaymentdate === '请选择') {
    ElMessage.error('请选择还款期限')
    flag.value = true
  }
}

const getUserLoan = async () => {
  alert(loanUserForm.value.loanlimit)
  loanUserForm.value.uid = localStorage.getItem('id')
  console.log(loanUserForm.value)
  const { code, message } = await addLoan(loanUserForm.value)
  if (code === 200) {
    ElMessage.success(message)
    dialogLoanUserVisible.value = false
  } else {
    ElMessage.error(message)
  }
}
const findLoan = ref([])

// 定义表格数据模型
const list = ref([])

// 分页条数据模型
const total = ref(0)

//分页条数据模型
const pageParamsForm = {
  page: 1, // 页码
  limit: 10, // 每页记录数
}
const pageParams = ref(pageParamsForm)

// 钩子函数
onMounted(() => {
  fetchData()
})

//还款
const repayment = async row => {
  console.log(row)
  loanUserForm.value.uid = localStorage.getItem('id')
  loanUserForm.value.loanlimit = row.redundancy1
  loanUserForm.value.id = row.id
  // alert(row.redundancy1)
  // alert(row.id)
  const { code, message } = await updateLoan(loanUserForm.value)
  if (code === 200) {
    ElMessage.success(message)
  } else {
    ElMessage.error(message)
  }
}
//贷款
const loan = async row => {
  console.log(row)
  loanUserForm.value.lid = row.lid
  loanUserForm.value.lname = row.lname
  loanUserForm.value.rate = row.rate
  loanUserForm.value.remark = row.remark
  dialogLoanUserVisible.value = true
  loanUserForm.value.uid = localStorage.getItem('id')
  // loanUserForm.value.loanlimit="11"
  //进行查询额度
  const { data } = await selectUserLoan(loanUserForm.value)
  loanUserForm.value.loanlimit = data
  loanlimit.value = data
  if (loanlimit.value <= 0) {
    ElMessage.error('您的信用等级和资产等级不足')
    flag.value = true
    xiao.value = true
  }
  // loanUserForm.value.loanlimit="11"
}
const loanlimit = ref('')
const loanForm = {
  rate: '',
  repaymentdate: '',
  uid: '',
  lid: '',
  lname: '',
  remark: '',
  loanlimit: '',
  id: '',
}
const loanUserForm = ref(loanForm)

//页面变化
const handleSizeChange = size => {
  pageParams.value.limit = size
  fetchData()
}
const handleCurrentChange = number => {
  pageParams.value.page = number
  fetchData()
}

// 分页查询
const fetchData = async () => {
  const { code, message, data } = await getLoan(
    pageParams.value.page,
    pageParams.value.limit
  )
  list.value = data.records
  total.value = data.total
}
</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
